import React, { Component } from "react";
import "./FolderChild.scss";
import { getShowNameInfo } from "../../func/path";
import { StFile } from "../../class/StFile";
import * as fs from "fs";
export namespace FolderChild {
	export interface Props {
		fullName: string;
		onClick: (fullName: string, event?: Event) => void;
		onDoubleClick: (fullName: string, isDir: boolean, event?: Event) => void;
		selectedItems: string[];
		whenRename?: (fullName: string, elm: HTMLElement, event?: Event) => void;
	}
	export interface State {
		isDir: boolean;
		stats?: fs.Stats,
		fullName: string;
		selected: boolean;
	}
}

export class FolderChild extends Component<FolderChild.Props, FolderChild.State> {
	public readonly state = {
		isDir: true,
		stats: null,
		fullName: '/',
		selected: false
	};
	public elm: HTMLElement;
	constructor(props: FolderChild.Props) {
		super(props);
		this.state.fullName = this.props.fullName;
		console.log(this.props.selectedItems.indexOf(this.state.fullName));
		this.state.selected = this.props.selectedItems.indexOf(this.state.fullName) >= 0 ? true : false;
	}
	public getClassName(): string {
		let className: string = (this.state.isDir ? 'dir' : 'file') + ' folder-child';
		if (this.state.selected) {
			className += '  selected-item';
		}
		return className;
	}
	public whenClick(fullName: string): void {
		this.props.onClick(fullName, event);
	}
	public whenDbClick(fullName: string): void {
		this.props.onDoubleClick(fullName, this.state.isDir, event);
	}

	public render() {
		let nameInfo = getShowNameInfo(this.props.fullName);
		return <div
			className={this.getClassName() + (nameInfo.isLib ? ' lib' : '')}
			title={(this.state.isDir ? 'dir:' : 'file:') + nameInfo.originName}
			onClick={this.whenClick.bind(this, this.props.fullName)}
			onDoubleClick={this.whenDbClick.bind(this, this.props.fullName)}
			data-filename={this.props.fullName}
			ref={(elm) => { this.elm = elm; }}
		>
			<div className="base-name">
				<div className="short-name" onBlur={this.whenBlur.bind(this)}>{nameInfo.name}</div>
			</div>
			<div className="mtime">{(this.state.stats ? this.state.stats.mtime : new Date()).toLocaleString()}</div>
			<div className="ctime">{(this.state.stats ? this.state.stats.ctime : new Date()).toLocaleString()}</div>
			<div className="size">{this.humanSize(this.state.stats ? this.state.stats.size : 0)}</div>
		</div>
	}
	protected whenBlur() {
		console.log('blur on ' + this.state.fullName);
		if (typeof this.props.whenRename === "function") {
			this.props.whenRename(this.state.fullName, this.elm);
		}
	}
	public componentWillReceiveProps(nextProps: FolderChild.Props) {
		let selected = nextProps.selectedItems.indexOf(this.state.fullName) >= 0 ? true : false;
		console.log(this.props.selectedItems, this.state.fullName, this.props.selectedItems.indexOf(this.state.fullName));
		this.setState({
			selected,
		});
	}
	public componentWillMount() {
		this.getFileState();
	}
	public componentDidMount() {
	}
	public humanSize(size: number): string {
		let m = Math.floor(size / 1024 / 1024);
		let remain = size - m * 1024 * 1024;
		let k = Math.floor(remain / 1024);
		remain = remain - k * 1024;
		let str = '';
		if (m) {
			str += `${m}m`;
		}
		if (k) {
			str += `${k}k`;
		}
		if (remain) {
			let remainStr = remain.toString();
			if (str) {
				str += remainStr.padStart(3, '0');
			} else {
				str += remain.toString();
			}
		}
		return str;
	}
	public async getFileState() {
		let filer = new StFile(this.props.fullName);
		let stats = await filer.getState();
		if (stats.isDirectory()) {
			this.setState({
				isDir: true,
				stats,
			});
		} else {
			this.setState({
				isDir: false,
				stats
			});
		}
		return stats;
	}
}